<template>
	<view>
		<view class="topBox">
		<head-navbar :back="true" :bgColor="'#FFFFFF'">
			<view class="">钻石</view>
		</head-navbar>
		<view class="content">
			<view class="top">
				<image src="../../static/img/yueBg.png" mode="" class="img"></image>
				<view class="txt">
					<view class="title">
						钻石数量
					</view>
					<view class="total">
						<text>{{moneyNumber || 0}}</text>
					</view>
				</view>	
				<view class="btnlist">
				<button type="default" v-if="$store.state.dataBody.diamondTransferYueOpen == 1" class="sumbtn" @click="toExchange">兑换</button>
				<button type="default" v-if="$store.state.dataBody.diamondZhuanZhangOpen == 1" class="sumbtn" @click="toTransfer">转账</button>
				</view>
			</view>
		</view>
		</view>
		 <scroll-view scroll-y="true" :style="{height:getTabbarContentHeight + 'px'}" @scrolltolower="loadPage">
		<view class="list">
		<!-- 	<view class="title">
				收支明细
			</view> -->
			<view class="item" v-for="(item,index) in list" :key="item.id">
				<view class="it itTop" >
					<view class="txt">{{item.typeName}}
					</view>
					<view style="color: #888888;">{{item.createTime}}</view>
				</view>
				<!-- <view class="orderNum">订单号:{{item.orderNo}}</view> -->
				<view class="it">
					<!-- <view style="color: #888888;">余额: {{item.balance}}</view> -->
					<view class="orderNum" v-if="item.orderNo != '' && item.orderNo != null">订单号:{{item.orderNo}}</view>
					<view class="total">{{item.isIn == 0?'-':'+'}}{{item.amount}}</view>
				</view>
			</view>
		</view>
		<u-loadmore color='#949494' :status="status" bg-color="rgba(255,255,255,0)" margin-top='20' margin-bottom='15'
		 @loadmore='laodmore' :loadText="loadText" />
		 </scroll-view>
	</view>
</template>

<script>
	import * as api from "@/api/user/money.js";
	export default {
		data() {
			return {
				moneyNumber:'',
				getTabbarContentHeight:0,
				list:[],
				status: 'loading',
				pageNo:1,
				pageSize:15,
				pages:null,
				loadText: {
					loadmore: '获取数据错误,点击重新加载',
					loading: '努力加载中',
					nomore: '没有更多了哦'
				},
			}
		},
		onLoad(option){
			this.moneyNumber = option.price;
			this.getRecordList();
		},
		onReady() {
			let that = this
			uni.getSystemInfo({
				success: function(res) { // res - 各种参数
					let info = uni.createSelectorQuery().select(".topBox");
					info.boundingClientRect(function(data) { //data - 各种参数
						that.getTabbarContentHeight = res.windowHeight - data.height
					}).exec()
				}
			});
		},
		methods: {
			toTransfer(){
					uni.navigateTo({
						url:'/pages/my/transfer/transfer?money='+ this.moneyNumber + '&type=1'
					})
			},
			toExchange(){
					uni.navigateTo({
						url:'/pages/my/exchange/exchange?money='+ this.moneyNumber + '&type=1'
					})
			},
			loadPage() {
				if(this.pageNo <= this.pages ){
					this.getRecordList()
				}
			},			
			laodmore() {
				this.status = 'loading'
				this.list = []
				this.pageNo = 1
				this.getRecordList()
			},
			getRecordList() {
				api.pageDiamondFinanceLog({
					page: {
						pageSize: this.pageSize,
						pageNo: this.pageNo
					}
				}).then(res => {
					this.pages = res.data.dataBody.pages
					this.pageNo++
					this.list = this.list.concat(res.data.dataBody.records)
					if(this.pageNo > this.pages){
						this.status = 'nomore'
					}
				}).catch(err => {
					this.status = 'loadmore'
				})
			},
			// getRecordList() {
			// 		api.pageDiamondFinanceLog({page:{pageNo:this.pageNo,pageSize:this.pageSize}}).then(res=>{
			// 			this.list = res.data.dataBody.records;
			// 			console.log(this.list)
			// 		}).catch(err=>{
						
			// 		})
					
			// }
		}
	}
</script>

<style lang="scss" scoped>
.content{
	
	.top{
		position: relative;
		.img{
			 width: 100%;
			height: 340upx;
		}
		.txt{
			position: absolute;
			top: 100upx;
			left: 61upx;
			color: #FFFFFF;
			// font-weight: bold;
			.title{
				font-size: 27upx;
			}
			.total{
				margin-top: 20upx;
				font-size: 59upx;
			}
		}
		.yue{
			font-size: 27upx;
			color: #FFFFFF;
			position: absolute;
			bottom: 22upx;
			right: 30upx;
		}
		.record{
			position: absolute;
			top: 50upx;
			right: 50upx;
			color: #fff;
		}
	}
}
.btnlist{
	position: absolute;
	left: 30rpx;
	bottom: 30rpx;
		display: flex;
		
	}
	.sumbtn{
		height: 60upx;
		width: 140rpx;
		line-height: 60rpx;
		background: linear-gradient(270deg, #ff2020, #ff5a02);
		color: #FFFFFF;
		border-radius: 100upx;
		margin-top: 30upx;
		font-size: 26rpx;
		margin-left: 30rpx!important;
		margin-right: 0!important;
	}
	.list{
		padding:0 32upx;
		background: #FFFFFF;
		.title{
			font-size: 32upx;
			color: #333333;
			font-weight: 600;
			padding: 20rpx;
			padding-top: 0;
			border-bottom: 1rpx solid #f4f4f4;
		}
		.item{
			padding:30upx 0;
			border-bottom: 1px solid #f4f4f4;
			.it{
				display: flex;
				align-items: center;
				justify-content: space-between;
				> .txt{
					color: #333333;
					font-size: 30upx;
				}
				.total{
					color: #333333;
				}
			}
			.itTop{
				margin-bottom: 20rpx;
			}
			.orderNum{
				font-size: 27rpx;
				color: #888888;
			}
		}
	}
</style>
